<template>
  <view class="popup-page">
    <u-popup :show="havingSexPopupShow" @close="close" round="20" :customStyle="{background: '#f1f1f1'}">
      <view class="popup-context-top">
        <view class="popup-context-top-title">
          <view class="popup-top-title-cancel" @click="close">取消</view>
          <view class="popup-top-title-center">爱爱记录</view>
          <view class="popup-top-title-submit" @click="submit">确定</view>
        </view>
        <view class="popup-context">
          <u-grid :border="false" @click="itemClick" col="5">
            <u-grid-item v-for="(item, index) in havingSexList" :key="index">
              <uni-icons v-if="item.selectd" type="checkbox-filled" size="24" class="right-bottom" color="#4cd964"/>
              <u-icon class="grid-item-icon" :name="item.url" :size="50"/>
              <text class="grid-item-text">{{ item.label }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {commonHavingSexList} from "@/api/commonArray";

export default {
  data() {
    return {
      havingSexPopupShow: false,
      havingSexList: commonHavingSexList,
      selectData: {
        from: "havingSex",
        havingSexSelectData: null
      }
    };
  },
  methods: {
    close() {
      this.havingSexPopupShow = false
    },
    open(selectData) {
      for (let i = 0; i < this.havingSexList.length; i++) {
        if (this.havingSexList[i].value == selectData) {
          this.havingSexList[i].selectd = true
        }
      }
      this.havingSexPopupShow = true
    },
    itemClick(index) {
      for (let i = 0; i < this.havingSexList.length; i++) {
        this.havingSexList[i].selectd = false
      }
      this.havingSexList[index].selectd = true
    },
    submit() {
      for (let i = 0; i < this.havingSexList.length; i++) {
        const temp = this.havingSexList[i];
        if (temp.selectd) {
          this.selectData.havingSexSelectData = temp
          break
        }
      }
      this.$emit('callback', this.selectData)
      this.close()
    }
  }
}
</script>

<style lang="scss">
@import "@/pages/home/index.less";
</style>
